<template>
  <div class="zoom_wrap">
    <div
      id="small"
      @mouseenter="show"
      @mouseleave="hide"
      ref="small"
      @mousemove="maskMove($event)"
    >
      <img ref="smallimg" :src="mainPictures[0]" alt="" />
      <div ref="mask" id="mask"></div>
    </div>
    <div id="bigimg" ref="bigimg">
      <img ref="bigimage" :src="mainPictures[0]" alt="" />
    </div>
    <!-- 竖向图片 -->
    <div class="img_list">
      <img
        v-for="(item, index) in mainPictures"
        :key="index"
        @mouseenter="changeSrc($event)"
        :src="item"
        alt=""
      />
    </div>
  </div>
</template>
<script>
export default {
  props: {
    //设计父传子的props
    mainPictures: {
      type: Array,
      default () {
        return []
      }
    }
  },

  methods: {
    // 鼠标经过 图片 切换图片
    changeSrc (e) {
      // 小图
      var smallimg = this.$refs.smallimg
      // 大图
      var bigimage = this.$refs.bigimage
      bigimage.src = e.target.src
      smallimg.src = e.target.src
    },
    show () {
      var mask = this.$refs.mask
      var bigimg = this.$refs.bigimg
      mask.style.display = 'block'
      bigimg.style.display = 'block'
    },
    hide () {
      var mask = this.$refs.mask
      var bigimg = this.$refs.bigimg
      mask.style.display = 'none'
      bigimg.style.display = 'none'
    },
    maskMove (e) {
      // console.log(e)
      // 获取遮罩层
      var mask = this.$refs.mask
      //获取小盒子
      var small = this.$refs.small
      // e.layerX 获取鼠标在元素上发生事件的位置
      var x = e.layerX - 100
      var y = e.layerY - 100
      // 限制鼠标的x和y
      x < 0 ? (x = 0) : x
      y < 0 ? (y = 0) : y
      x > 200 ? (x = 200) : x
      y > 200 ? (y = 200) : y
      // 让遮罩层跟着鼠标的位置移动
      mask.style.left = x + 'px'
      mask.style.top = y + 'px'
      //让大盒子滚动起来
      var bigimg = this.$refs.bigimg
      bigimg.scrollLeft = x * 2
      bigimg.scrollTop = y * 2
    }
  }
}
</script>
<style lang="less">
.zoom_wrap {
  width: 500px;
  height: 600px;
  position: relative;
  display: flex;
  #small {
    width: 400px;
    height: 400px;
    position: relative;

    img {
      width: 400px;
      height: 400px;
    }
    // 遮罩层
    #mask {
      width: 200px;
      height: 200px;
      background: rgba(0, 0, 0, 0.4);
      position: absolute;
      display: none;
      pointer-events: none;
      top: 0;
      left: 0;
      cursor: move;
    }
  }
  #bigimg {
    width: 400px;
    height: 400px;
    background: white;
    position: absolute;
    left: 410px;
    top: 0;
    overflow: hidden;
    display: none;
    img {
      width: 800px;
      height: 800px;
    }
  }
  .img_list {
    width: 100px;
    height: 500px;
    margin-left: 30px;
    img {
      width: 64px;
      height: 64px;
      margin-bottom: 10px;
      cursor: pointer;
      &:hover {
        border: 2px solid #27bb9a;
        box-sizing: border-box;
      }
    }
  }
}
</style>
